<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
        .pic{
            /*移动x轴*/
            /*transform: translateX(100px);*/
            /*-webkit-transform:translateX(100px);*/
            /*transform: translateY(100px);*/
            /*-webkit-transform:translateY(100px);*/
            -webkit-transform: translateX(100px) translateY(100px);
        }


    </style>
</head>
<body>
   <!--
         在不同的浏览器打开效果都是一样的，做一下浏览器的兼容
        在页面放置一张图片，三个按钮
        点击第一个按钮，图片横向移动
        点击第二个按钮，图片纵向移动
        点击第三个按钮，图片水平纵向同时移动

        translate(x,y)	2D转换，沿X和Y轴移动元素
        translateX(n)	2D转换，沿X轴移动元素
       translateY(n)	2D转换，沿Y轴移动元素
     定义第四个按钮，改变起始位置（transfrom-orign）----移动

   -->
   <div id="box">
      <img   src="img/tx.jpg" id="image"/>
   </div>
   <input type="button" value="改变位置" onclick="fn()">
<script type="text/javascript">
    function fn(){
        var image=document.getElementById("image");
        image.className="pic";
    }




</script>
</body>
</html>